<template>
  <div class="home-top">
    <h3>人气推荐</h3>
    <div class="content">
      <van-card
        v-for="item in goodsList" :key="item.id"
        :tag="item.tag"
        :price="item.retail_price"
        :origin-price="item.origin_price" :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url">
      </van-card>
    </div>
  </div>
</template>

<script setup>
const goodsList = [
  {
    retail_price: '599.00',
    origin_price: '499.00', 
    name: 'Olay水乳',
    goods_brief: '哎呀妈呀，Olay 水乳简直就是护肤界的“搞笑担当”！别人是护肤，它是给你的脸开一场水润狂欢派对！用了 Olay 水乳，脸蛋就像被施了魔法，瞬间从“糙汉子”变成了“水嫩小公主”，让你忍不住对着镜子亲自己两口，这效果，绝了！', 
    list_pic_url: '/images/top1.jpg',
    tag: 'TOP1'
  },
  {
    retail_price: '299', 
    origin_price: '399.00', 
    name: '玲娜贝尔公仔娃娃',
    goods_brief: '🎀你看它那毛茸茸的大尾巴，就像一个粉色的梦幻棉花糖，让人忍不住想上去揪一揪（虽然我们要温柔对待它哦😏）', 
    list_pic_url: '/images/top2.jpg',
    tag: 'TOP2'
  },
  {
    retail_price: '2999.00',
    origin_price: '3200.00',
    name: '西太后手表',
    goods_brief: '西太后手表，戴上它，你就是时间界的‘太后老佛爷’！别人看时间，你看的是时尚的‘皇位’，让手腕瞬间‘登基’，霸气侧漏！',
    list_pic_url: '/images/top3.jpg', 
    tag: 'TOP3'
  },
  {
    retail_price: '1899.00', 
    origin_price: '2520.00', 
    name: '西太后项链',
    goods_brief: '戴上西太后项链，你就是宇宙中最闪的那颗‘叛逆星人’！别人的项链是装饰，你的项链是‘星际通行证’，让你在时尚星球里畅通无阻，闪瞎众人！',
    list_pic_url: '/images/top4.webp', 
    tag: 'TOP4'
  },
  {
    retail_price: '888.00',
    origin_price: '996.00',
    name: '耐克鞋',
    goods_brief: '想象一下，你穿着耐克鞋走在街上，那感觉，就像是给双脚穿上了火箭助推器，“嗖”的一下，你就成了街头的超级明星，耐克鞋，让你“足”够出彩！', 
    list_pic_url: '/images/top5.jpg',
    tag: 'TOP5' 
  },
  {
    retail_price: '39999.00',
    origin_price: '59999.00',
    name: '香奈儿包包',
    goods_brief: '香奈儿这款包包，那可真是包包界的‘超级明星’！背上它，你就是街头巷尾的时尚焦点，别人都是路人甲，只有你是闪闪发光的主角。感觉自己不是在背包包，而是背着一个时尚魔法棒，‘嗖’的一下就变得魅力无限啦！走在路上，回头率爆表，连交警都得被你吸引，怀疑你是不是违反了‘时尚交通规则’——太耀眼啦！', 
    list_pic_url: '/images/top6.jpg',
    tag: 'TOP6' 
  },
  {
    retail_price: '89999.00',
    origin_price: '99999.00',
    name: '土豪风黄金手镯',
    goods_brief: '😎这款手镯，那简直就是土豪的象征啊！一戴上它，感觉整个世界都在你的手腕上闪闪发光。✨走在路上，别人一看就知道你是个有身份（qian）的人。', 
    list_pic_url: '/images/top7.jpg',
    tag: 'TOP7' 
  },
  {
    retail_price: '400.00',
    origin_price: '420.00',
    name: '奥迪口红',
    goods_brief: '你以为奥迪只擅长造汽车？那你可就大错特错啦！奥迪口红，让你的嘴唇享受“速度与激情”般的色彩盛宴，涂上去，你就是马路上最靓的“唇”！别人的口红是走路带风，奥迪口红能让你走路带“引擎轰鸣声”，哈哈！', 
    list_pic_url: '/images/top8.jpg',
    tag: 'TOP8' 
  }
]
</script>

<style lang="less" scoped>

.home-top {
  h3 {
    font-size: 25px;
    line-height: 30px; 
    text-align: center;
    margin: 0.5rem 0;
    // font-family: KaiTi;
    // font-weight: bold;
  }
  .content {
    --van-tag-primary-color: #f06969; 
    --van-card-font-size: 16px;
    --van-card-background: #f9f9f9;;
    background: var(--van-card-background);
    :deep(.van-card) {
      margin-top: 0;
      .van-card   title {
        padding: 10px 0 5px; }
      .van-card   price-currency {
        font-size: var(--van-card-font-size);
      }
    }
    &::after {
      content: '';
      display: block;
      height: 3rem;
    }
  } 
}
</style>